<template>
  <div class="ripple-button">
    <div class="btn-box">
      <div class="box" @mouseenter="buttonMouseenter">
        <span class="ripple"></span>
        <p>戳我！！</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    buttonMouseenter(event){
      console.log(123);
      let box = document.querySelector('.box');
      let ripple = box.querySelector('.ripple');
      ripple.classList.add('animation');
      ripple.style.width = box.offsetWidth + 'px';
      ripple.style.height = box.offsetHeight + 'px';
      ripple.style.top = -(box.offsetHeight - event.offsetY) + 'px';
      ripple.style.left = -(box.offsetWidth/2 - event.offsetX) + 'px';
      setTimeout(() => {
        ripple.classList.remove('animation');
      },500);
    }
  }
}
</script>
<style scoped>
.ripple-button{
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-box{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.box{
  position: relative;
  width: 250px;
  height: 125px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  user-select: none;
  font-size: 24px;
  font-family: consolas;
  /*阴影*/
  margin: 5px;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
}
.box{
  background: linear-gradient(
    150deg,
  rgb(5,141,239),
  rgb(22,175,194)
  ); 
}
.ripple{
  display: block;
  position: absolute;
  border-radius: 100%;
  background: rgba(255,255,255,0.5);
  transform: scale(0); 
}
.animation{
  animation: ripple 0.5s ease-in;
}
@keyframes ripple{
  100%{
    transform: scale(3);
    opacity: 0;
  }
}
</style>